.generic-report-container {
  @include gl-display-grid;

  grid-template-columns: max-content auto;
}

.generic-report-row {
  display: contents;

  &:last-child .generic-report-column {
    @include gl-border-b-0;
  }
}

.generic-report-column {
  @include gl-px-3;
  @include gl-py-5;
  @include gl-border-b-1;
  @include gl-border-b-solid;
  @include gl-border-gray-100;

  &:first-child {
    max-width: 15rem;
  }
}

// Note: the report list is using a non-utility approach because it needs to support two cases:
// 1. If it is only one level deep it should have no list style (and margins)
// 2. If it is more than one level deep it needs to have bullet points
// A utility-only approach would require additional logic within component, so it was decided to go with a
// custom class.
.generic-report-list {
  margin-bottom: 0 !important;
  @include gl-pl-0;

  li {
    @include gl-ml-0;
    @include gl-mb-2;
    @include gl-list-style-none;

    &:last-child {
      @include gl-mb-0;
    }
  }

  &.generic-report-list-nested li {
    @include gl-ml-5;
    list-style-type: disc;
  }
}

.generic-report-named-list {
  @include gl-display-grid;
  grid-template-columns: max-content auto;
  margin: 0 !important;

  > .generic-report-named-list-item {
    display: contents;
  }
}

.generic-report-named-list-item {
  @include gl-list-style-none;
  margin: 0 !important;

  .generic-report-named-list-label,
  .generic-report-named-list-value {
    @include gl-m-0;
    @include gl-display-flex;
    @include gl-pr-5;
    @include gl-py-3;
    @include gl-border-b-1;
    @include gl-border-b-solid;
    @include gl-border-gray-100;
  }

  &:first-child {
    > .generic-report-named-list-label,
    > .generic-report-named-list-value {
      @include gl-pt-0;
    }
  }

  &:last-child {
    > .generic-report-named-list-label,
    > .generic-report-named-list-value {
      @include gl-pb-0;
      @include gl-border-b-0;
    }
  }
}
